<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>请求数据/分页/三目运算法/loading/这以后就是我vue数据渲染的样本</title>    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/vue2.6.10.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script lang="javascript" src="./xlsx.js"></script>
	<script lang="javascript" src="./file-saver.js"></script>    <style type="text/css"> #inzhi{display: none;} .el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
	.el-pagination{text-align: center;float: none !important;} .el-table__header{width: 100% !important}
	 .el-table__body{width: 100% !important}</style></head><body>       <div id="app" style="overflow-x:hidden; verflow-y: auto;">		<el-input v-model="input" placeholder="请输入内容" id="inzhi"></el-input>
		
		<!-- 页面加载时出现打转 控制它,（先隐藏--在数据加载前显现--数据加载完后隐藏 ）-->        <el-table :data="this.info.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe  v-loading="loading" >			<el-table-column label="序号" type="index"   :index='indexMethod'> </el-table-column>			<el-table-column v-if='show' prop="id" label="关键词ID" > </el-table-column> 
			
			<el-table-column  prop="site" label="域名"  :formatter="formattersite"></el-table-column>
						<el-table-column  prop="keyword" label="关 键 词" ></el-table-column>			<el-table-column  prop="se" label="优化端口" :formatter="formatterse" ></el-table-column>			<el-table-column v-if='show' prop="price" label="当天单价" ></el-table-column>			<el-table-column v-if='show' prop="startRank" label="初始排名"  ></el-table-column>			<el-table-column v-if='show' prop="newRank" label="当前排名" >				<template slot-scope="scope">
					<!-- 鼠标提示信息 :content监测里面的三目运算法   -->					    <el-tooltip class="item" :content=" scope.row.newRank>0?'上升'+scope.row.newRank:'0'"  placement="left">
					      <el-tag type="success" type="info"  :style="{'color':(scope.row.newRank>0 && scope.row.newRank<11 ?'#67C23A':'red')}">{{ scope.row.newRank }} <i class="el-icon-top" v-show="11>scope.row.newRank && scope.row.newRank !==0?true:false" style="color:Green;"></i></el-tag>
					    </el-tooltip>
				</template>			</el-table-column>			<el-table-column v-if='show' prop="rankchange" label="排名变化" ></el-table-column>			<el-table-column v-if='show' prop="days" label="首页天数" ></el-table-column>			<el-table-column v-if='show' prop="addtime" label="开始时间"  :formatter="formatterTime"></el-table-column>			<el-table-column v-if='show' prop="savetime" label="排名更新"  :formatter="formatterTime"></el-table-column>
			<el-table-column v-if='feers' prop="addtime" label="扣费时间"   :formatter="formatterTime"></el-table-column>
			<el-table-column v-if='feers' prop="fees" label="扣费"  ></el-table-column>
			<el-table-column v-if='show' fixed="right" label="首页记录" >
				<!-- v-for='li in info' -->
				<!--  slot-scope="scope"这个类似于循环遍历时的info(v-for), scope.row => 获取整行的数据(类似于循环遍历后的{{li}} -->
				<template slot-scope="scope" v-if='show'>
					<el-button @click="handleClick(scope.row)" type="text" size="small" v-if='show'>详细记录</el-button>
				</template>
			</el-table-column>
			<el-table-column v-if='feers' fixed="right" label="操作" >
				<template slot-scope="scope">
					<el-button @click="fanghui(scope.row)" type="text" size="small">返回</el-button>
				</template>
			</el-table-column>        </el-table>
		<!-- 分页 -->        <el-pagination            @size-change="handleSizeChange"            @current-change="handleCurrentChange"            :current-page="currentPage"            :page-sizes="[10, 20, 50, 100]"            :page-size="pageSize"            layout="total, sizes, prev, pager, next, jumper"            :total="this.info.length"            style="float:right;margin-top:15px;">        </el-pagination>
		
		<export-excel v-if="list !== null" :list="list" :tHeader="tHeader" :tValue="tValue"></export-excel>    </div>    <script type="text/javascript">    new Vue({        el: '#app',        data () {            return {              info: null,              input: window.location.href,              pageSize: 10, //每页多少条              currentPage: 1, // 当前页
			  show:true,
			  feers:false,
			  // 定义loading一开始就是隐藏的
			  loading: false,
			  list:null,
			  tHeader:['Id', '告警类型'],
			  tValue:['id', 'site'],            }        },        mounted () {            // 一个参数的请求
			// 当页面加载到这来时会显现出来
			this.loading = true            axios                .post('https://api.m2e.cn/admin/Member/pm_quick_new?limit=1000&page=1&type=1&',{                    userid:this.input.substr(this.input.lastIndexOf("=") + 1),                })
				// 当页面数据加载完后到会隐藏loading                .then(response => {this.info = response.data.info ; this.loading = false } )                .catch(function (error) { // 请求失败处理                    console.log(error);                });        },        methods: {            // 添加自动增加序号            indexMethod(index){return  index + 1 ;},            handleSizeChange(val) {                this.pageSize = val;            },            // 当前页            handleCurrentChange(val) {                this.currentPage = val;            },                 
			//详细记录方法添加
			handleClick(row) {
				if(row.days>0){
					// 当页面加载到这来时会显现出来
					this.loading = true
					axios
					    .post('https://api.m2e.cn/admin/Member/quick_detail?limit=1000&page=1&type=1&"',{
					        userid:this.input.slice(this.input.indexOf("=")+1,this.input.indexOf("&")),
					        id:row.id
					    } )
						// 当页面数据加载完后到会隐藏loading
					    .then(response => { this.info = response.data.info; this.loading = false })
					    .catch(function (error) { // 请求失败处理
					      console.log(error);
					    });
						console.log(row)
						this.show = false
						this.feers = true
				}else{
					this.$message('这是一条消息提示')
				}	
			  },
			   //时间格式化，去除时分秒
			  formatterTime(row,column){
			  	    let data = row[column.property]
			  	    return  /\d{4}-\d{1,2}-\d{1,2}/g.exec(data )
			  },
			  // 刷新整个页面
			  fanghui(){
				    location.reload();
			  },
			  //域名去除协议的判断
			  formattersite(row,column){
					let data = row[column.property]
					if(data.toLowerCase().indexOf("http") !== -1 ){
						return data.substr(data.indexOf("//") + 2)
					}else{
						return data
					}
			  },
			  // 改变BDPC里面的BD改成百度
			  formatterse(row,column){
				  let data = row[column.property]
				  if(data.toLowerCase().indexOf("BD") == -1 ){
				  	return data.replace("BD",'百度')
				  }
			  }        }    })    </script></body></html>